import React, { Component } from 'react'
import { Steps } from 'antd-mobile'
import { NavBar } from 'components'
const Step = Steps.Step

export default class CustomerServiceProcess extends Component<any, any> {

    public state = {
        data: []
    }

    public componentDidMount () {
        this.getData()
    }

    public render (): JSX.Element {
        const { data } = this.state
        return (
            <div className="customerServiceResult">
                <NavBar title={<div style={{fontSize: '0.97rem', color: '#222'}}>进度详情</div>} fixed={true} />
                <div className="customerServiceResult_stepInfo">
                    <Steps current={1}>
                        {
                            data.map((item: any, index: number) => {
                                return (
                                    <Step 
                                        key={index}
                                        title={
                                            <div className="customerServiceResult_stepInfo_time">             <p className="DINPro">{item.time}</p>
                                                <p>{item.msgText}</p>
                                            </div>} 
                                        description={<div className={(index === 0) ? ' customerServiceResult_stepInfo_title_active' : 'customerServiceResult_stepInfo_title_default'}>经办人：{item.agentPerson}</div>} 
                                        icon={<span className={(index === 0) ? 'customerServiceResult_stepIcon_active' : 'customerServiceResult_stepIcon_default'} />} 
                                    />
                                )
                            })
                        }
                    </Steps>
                </div>
            </div>
            
        )
    }
    private getData = () => {
        const arr = [
            {
                msgText: '您的服务订单已审核客户发货，请将商品寄回',
                time: '2018-08-01 1:15:05',
                agentPerson: '香影旗舰店'
            },
            {
                msgText: '您的服务订单申请成功，待售后审核中',
                time: '2018-08-01 07:54:04',
                agentPerson: '系统'
            },
        ]
        this.setState({
            data: arr
        })
    }
}